<template>
    <div class="home2">
        <h4>选择套餐</h4>
        <hr>
        <div>
            <p>按并发人数计费</p>
            <el-form style="width: 60%;margin:20px auto;" :label-position="labelPosition" label-width="80px" :model="num">
                <el-form-item label="单价" style="height:25px;">
                    <p><span style="color:#64ACF4;font-weight:bold;">30</span> 元 /人 /月</p>
                </el-form-item>
                <el-form-item label="开发人数" style="height:45px;">
                    <el-input v-model="num.people"></el-input><br>
                    <span style="color:gray;">100-99999</span>
                </el-form-item>
                <el-form-item label="有效时间" style="height:25px;">
                    <el-input v-model="num.time"></el-input>
                </el-form-item>
                <el-form-item label="有效时间" style="height:25px;">
                    2017-01-10至2017-04-09
                </el-form-item>
                <el-form-item label="总金额" style="height:25px;">
                    <p style="color:#64ACF4;font-weight:bold;font-size:16px;">4,368</p>
                </el-form-item>
                <el-form-item>
                    <router-link to="/homeP"><el-button type="primary">购买</el-button></router-link>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-left:2.5%;">
            <p>按流量套餐计费</p>
            <el-form style="width: 60%;margin:20px auto;" :label-position="labelPosition" label-width="80px" :model="num">
                <el-form-item label="单价" style="height:25px;">
                    <p><span style="color:#64ACF4;font-weight:bold;">3</span> 元 /G</p>
                </el-form-item>
                <el-form-item label="流量" style="height:140px;">
                    <el-input v-model="num.people"></el-input><br>
                    <p style="color:gray;margin-top:5px;line-height:25px;"><span style="color:#FF503F;">提示</span>：平均每人观看1小时高清视频消耗流量为0.44G</p>
                </el-form-item>
                <el-form-item label="总金额" style="height:25px;">
                    <p style="color:#64ACF4;font-weight:bold;font-size:16px;">2,390</p>
                </el-form-item>
                <el-form-item>
                    <router-link to="/homeL"><el-button type="primary">购买</el-button></router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                labelPosition: 'right',
                num: {
                    people: '',
                    time: ''
                }
            };
        },
        methods: {
        }
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .home2{
        margin-top: 110px;
        margin-left: 105px;
        text-align: left;
    }

    .home2>h4{
        border-left: 5px solid #64ACF4;
        padding-left: 10px;
    }

    .home2>hr{
        width: 96%;
        margin-top: 15px;
    }

    .home2>div{
        width: 46.5%;
        height: 400px;
        border: 1px solid #DFDFDF;
        border-radius: 5px;
        margin-top: 20px;
        display: block;
        float: left;
    }

    .home2>div>p{
        height: 40px;
        line-height: 40px;
        background: #64ACF4;
        color: white;
        padding-left: 20px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
</style>